<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/y3.css">
    <link rel="stylesheet" href="https://3.swiper.com.cn/dist/css/swiper.min.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="header-y3">
            <img class="picture-y3" src="./img/img1-y3.png" alt="">
            <div class="top-y3">
                <a href="Lindex.html">
                    <img class="picture1-y3" src="./img/img2-y1.png" alt="">
                </a>
                <p class="font1-y3">摄影游</p>
                <img class="picture2-y3" src="./img/img3-y1.png" alt="">
            </div>
            <a href="search.html">
                <div class="search-y3">
                    <img class="picture3-y3" src="./img/img4-y1.png" alt="">
                    <p class="input-y3"><span>搜索目的地/关键词</span></p>
                </div>
            </a>
            <div class="banner-y3">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="title1-y3">当季目的地
                <div class="right-y3">
                    <span>查看更多</span>
                    <span class="font2-y3"></span>
                </div>
            </div>
            <ul class="lists1-y3">
            </ul>
            <div class="title1-y3">热门主题</div>
            <ul class="lists2-y3">
            </ul>
            <div class="title1-y3">热门主题</div>
            <div class="nav">
                <img class="picture5-y3" src="./img/img2-y3.png" alt="">
                <p class="font7-y3">确定成行线路合集</p>
            </div>
        </div>
        <div class="topp-y3">
            <div class="topp1-y3">
                <ul class="lists3-y3">
                    <li class="active-y3">全球徒步</li>
                </ul>
            </div>
        </div>
        <ul class="lists4-y3">
        </ul>
    </div>
</body>
<script src="./js/reset.js"></script>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container',{
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>
<script>
    const bannery3 = document.querySelector('.swiper-wrapper');
    const contentsy1 = document.querySelector('.lists1-y3');
    const contentsy2 = document.querySelector('.lists2-y3');
    const contentsy3 = document.querySelector('.lists3-y3');
    const contentsy4 = document.querySelector('.lists4-y3');
    
    const tagParams = [
        { text: "摄影精选", mddFir: 627 },
        { text: "标签1", mddFir: 780 },
        { text: "标签2", mddFir: 664 },
        { text: "标签3", mddFir: 666 },
        { text: "标签4", mddFir: 665 },
        { text: "标签5", mddFir: 667 }
    ];
    
    let currentMddFir = 627;

    fetch(`https://m.youxiake.com/api/m/channel/photo?sitecode=39&city_id=39`)
        .then(res => res.json())
        .then(res1 => {
            console.log(res1.data);
            res1.data.banner.forEach(item => {
                bannery3.innerHTML += `
                  <div class="swiper-slide">
                    <img class="picture4-y3" src="${item.image}" alt="${item.title || '轮播图片'}">
                  </div>
                `;
            });
            swiper.update(); 
            
            res1.data.mdd.forEach(item1 => {
                contentsy1.innerHTML += `
                    <li>
                        <div class="cover-y3">
                            <img class="img1-y3" src="${item1.image}" alt="${item1.title}">
                            <div class="p-y3">
                                <p class="font3-y3">${item1.title}</p>
                                <p class="font4-y3">${item1.subTitle}</p>
                            </div>
                        </div>
                        <div class="cover1-y3"></div>
                        <div class="cover2-y3"></div>
                    </li>
                `;
            });
            
            res1.data.theme.forEach(item2 => {
                contentsy2.innerHTML += `
                    <li>
                        <div class="covers-y3">
                            <img class="imgs-y3" src="${item2.image}" alt="${item2.title}">
                            <div class="ps-y3">
                                <p class="font5-y3">${item2.title}</p>
                                <p class="font6-y3">${item2.subTitle}</p>
                            </div>
                        </div>
                        <div class="covers1-y3"></div>
                        <div class="covers2-y3"></div>
                    </li>
                `;
            });
            renderTagList();
            
            if (res1.data.tags && res1.data.tags.length > 0) {
                const tags = document.querySelectorAll('.lists3-y3 li');
                res1.data.tags.forEach((item, index) => {
                    if (tags[index]) {
                        tags[index].textContent = item.title;
                    }
                });
            }
            loadProductList(currentMddFir);
        })
        .catch(err => {
            console.log(err);
        });

    function renderTagList() {
        contentsy3.innerHTML = '';
        
        tagParams.forEach((tag, index) => {
            const li = document.createElement('li');
            li.textContent = tag.text;
            
            if (index === 0) {
                li.classList.add('active-y3');
            }
            
            li.dataset.mddFir = tag.mddFir;
            
            li.addEventListener('click', function() {
                currentMddFir = parseInt(this.dataset.mddFir);

                document.querySelectorAll('.lists3-y3 li').forEach(item => {
                    item.classList.remove('active-y3');
                });
                this.classList.add('active-y3');
                scrollToTag(this);
                loadProductList(currentMddFir);
            });
            contentsy3.appendChild(li);
        });
    }

    function scrollToTag(element) {
        const container = document.querySelector('.topp1-y3');
        const containerRect = container.getBoundingClientRect();
        const elementRect = element.getBoundingClientRect();
        
        const scrollPosition = element.offsetLeft - (containerRect.width / 2) + (elementRect.width / 2);
        
        container.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
        });
    }

    function loadProductList(mddFir) {
        contentsy4.innerHTML = '<li class="loading-y3">加载中...</li>';
        
        const pages = [1, 2, 3];
        const requests = pages.map(page => {
            return fetch(`https://m.youxiake.com/api/m/channel/photo/flow?mddFir=${mddFir}&mddSec=&page=${page}&sitecode=39&type=`);
        });
        
        Promise.all(requests)
            .then(responses => Promise.all(responses.map(res => res.json())))
            .then(results => {
                contentsy4.innerHTML = '';
                
                results.forEach(res1 => {
                    if (res1.data && res1.data.data && res1.data.data.list) {
                        res1.data.data.list.forEach(item4 => {
                            const dataDetail = item4.dataDetail || {};
                            
                            contentsy4.innerHTML += `
                                <li>
                                    <img src="${dataDetail.image || ''}" class="bg-y3" alt="${dataDetail.title || ''}">
                                    <span class="dingwei-y3">${dataDetail.placeLabel || ''}</span>
                                    <div class="bott-y3">
                                        <p class="t-y3">${dataDetail.title || ''}</p>
                                        ${dataDetail.tagList && dataDetail.tagList.length > 0 
                                        ? (dataDetail.tagList.includes('爆品') ? '<p class="bao-y3">爆品</p>' 
                                        : dataDetail.tagList.includes('新品') ? '<p class="bao-y3">新品</p>' : '') 
                                        : ''}
                                        <div class="gentuan-y3">
                                        <span>${dataDetail.productType || ''}·${dataDetail.productCat || ''}·${dataDetail.days || ''}</span>
                                        </div>
                                        <div class="tag-y3">
                                            ${dataDetail.saleOtherList && dataDetail.saleOtherList.length > 0 
                                            ? `<div class="two-y3">${dataDetail.saleOtherList[0].detailRemark || ''}</div>` 
                                            : ''}
                                            ${dataDetail.tagList && dataDetail.tagList.length > 0 
                                            ? `<div class="two1-y3">${dataDetail.tagList.join('、')}</div>` 
                                            : ''}
                                        </div>
                                        <div class="bot2-y3">
                                            <div class="txt6-y3">
                                                <span>￥</span>
                                                <span class="txt7-y3">${dataDetail.priceLabel || ''}</span>
                                                <span>起</span>
                                            </div>
                                            <span class="txt1-y3">${dataDetail.numLabel || ''}</span>
                                        </div>
                                    </div>
                                </li>
                            `;
                        });
                    }
                });
            })
            .catch(err => {
                console.log(err);
            });
    }
</script>
</html>
